<template>
  <van-nav-bar
    :title="title"
    :left-text="leftText"
    :left-arrow="showLeftArrow"
    :right-text="rightText"
    :fixed="fixed"
    :placeholder="fixed"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
    <template #left v-if="$slots.left">
      <slot name="left"></slot>
    </template>
    <template #right v-if="$slots.right">
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Props {
  title?: string
  leftText?: string
  rightText?: string
  showLeftArrow?: boolean
  fixed?: boolean
}

interface Emits {
  (e: 'click-left'): void
  (e: 'click-right'): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  leftText: '',
  rightText: '',
  showLeftArrow: false,
  fixed: true
})

const emit = defineEmits<Emits>()
const router = useRouter()

const onClickLeft = () => {
  emit('click-left')
  if (props.showLeftArrow) {
    router.back()
  }
}

const onClickRight = () => {
  emit('click-right')
}
</script>

<style scoped>
:deep(.van-nav-bar) {
  background-color: #fff;
  border-bottom: 1px solid #ebedf0;
}

:deep(.van-nav-bar__title) {
  font-weight: 500;
  font-size: 16px;
}
</style>